<template>
	<div class="material-info">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addMaterial">新增物料</el-button>
				<el-input v-model="searchName" placeholder="搜索物料名称" style="width: 200px; margin-left: 10px" clearable />
			</div>

			<el-table :data="filteredMaterials" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="category" label="分类" sortable></el-table-column>
				<el-table-column prop="code" label="编码" sortable></el-table-column>
				<el-table-column prop="unit" label="主计量" sortable></el-table-column>
				<el-table-column prop="name" label="物料名称" sortable></el-table-column>
				<el-table-column prop="supply" label="供应方式" sortable></el-table-column>
				<el-table-column prop="spec" label="规格描述"></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editMaterial(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteMaterial(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="物料信息" width="600px">
			<el-form :model="currentMaterial" label-width="120px">
				<el-form-item label="分类">
					<el-input v-model="currentMaterial.category" />
				</el-form-item>
				<el-form-item label="编码">
					<el-input v-model="currentMaterial.code" />
				</el-form-item>
				<el-form-item label="主计量">
					<el-input v-model="currentMaterial.unit" />
				</el-form-item>
				<el-form-item label="物料名称">
					<el-input v-model="currentMaterial.name" />
				</el-form-item>
				<el-form-item label="供应方式">
					<el-select v-model="currentMaterial.supply" placeholder="选择供应方式">
						<el-option label="外购" value="外购" />
						<el-option label="自制" value="自制" />
						<el-option label="委外" value="委外" />
					</el-select>
				</el-form-item>
				<el-form-item label="规格描述">
					<el-input v-model="currentMaterial.spec" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveMaterial">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const materials = ref([
	{ category: '原料', code: 'MAT001', unit: 'kg', name: '阿莫西林原料', supply: '外购', spec: '白色粉末' },
	{ category: '辅料', code: 'MAT002', unit: 'L', name: '纯化水', supply: '自制', spec: '无色透明液体' },
	{ category: '包装材料', code: 'MAT003', unit: '个', name: '瓶盖', supply: '外购', spec: '蓝色塑料' },
])

for (let i = 4; i <= 15; i++) {
	materials.value.push({
		category: i % 3 === 0 ? '原料' : (i % 3 === 1 ? '辅料' : '包装材料'),
		code: `MAT00${i}`,
		unit: i % 2 === 0 ? 'kg' : 'L',
		name: `物料${i}`,
		supply: i % 2 === 0 ? '外购' : '自制',
		spec: i % 2 === 0 ? '医药级' : '工业级'
	})
}

const searchName = ref('')
const dialogVisible = ref(false)
const currentMaterial = ref({})

// 筛选
const filteredMaterials = computed(() =>
	materials.value.filter(m => !searchName.value || m.name.includes(searchName.value))
)

// 新增
const addMaterial = () => {
	currentMaterial.value = { category: '', code: '', unit: '', name: '', supply: '', spec: '' }
	dialogVisible.value = true
}

// 编辑
const editMaterial = (row) => {
	currentMaterial.value = { ...row }
	dialogVisible.value = true
}

// 保存
const saveMaterial = () => {
	if (!currentMaterial.value.code || !currentMaterial.value.name) {
		ElMessage.error('编码和物料名称不能为空')
		return
	}
	const index = materials.value.findIndex(m => m.code === currentMaterial.value.code)
	if (index >= 0) {
		materials.value[index] = { ...currentMaterial.value }
		ElMessage.success('物料已更新')
	} else {
		materials.value.push({ ...currentMaterial.value })
		ElMessage.success('物料已新增')
	}
	dialogVisible.value = false
}

// 删除
const deleteMaterial = (row) => {
	ElMessageBox.confirm('确认删除该物料吗？', '提示', { type: 'warning' })
		.then(() => {
			materials.value = materials.value.filter(m => m.code !== row.code)
			ElMessage.success('物料已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.material-info .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
